<template>
  <div class="w-per-100 h-per-100 bg-color-fff o-h">
    <Banner />
    <Main :list='data' :tab='tab' />
    <Footer :tab='tab' @tab='v=>tab=v' />
    <Detail />
  </div>
</template>

<script setup>
import Banner from './components/Banner.vue'
import Main from './components/Main.vue'
import Footer from './components/Footer.vue'
import Detail from './components/Detail.vue'
import { computed, ref } from 'vue'
import JsonHchh from './data/hchh.json'
import JsonJtbb from './data/jtbb.json'
import JsonMmzx from './data/mmzx.json'
import JsonMzbj from './data/mzbj.json'
import JsonXdjx from './data/xdjx.json'
import JsonXfsp from './data/xfsp.json'

const list = [].concat(JsonXdjx, JsonHchh, JsonJtbb, JsonMmzx, JsonMzbj, JsonXfsp)
list.forEach((item, index) => {
  item.index = index + 1
  item.id = `${Date.now()}-${index}` 
})
const tab = ref('')
const data = computed(() => {
  return list.filter(o => o.kind.includes(tab.value))
})
</script>

<style lang="stylus">

</style>